import {useMemo, useState, useEffect} from 'react'



// const UseMemo = () =>{
//     const [num,setNum] = useState(0)
//     const [num1,setNum1] = useState(0)

//     const countNum2 = ()=>{
//         console.log('countNum2');
//         return num * 2
//     }

//     const num2 = useMemo(()=>{
//         console.log('useMemo');
//         return num * 2
//     })

//     return(<>
//     <div>
//         <div>useMemo的用法</div>
//         <div>num = {num}</div>
//         <div>num*2= = {countNum2()}</div>
//         <div>num*2= = {num2}</div>
//  <button onClick={()=>setNum(num+1)}>大家一起发财</button>
// <hr />
// <div>num1={num1}</div>
// <button onClick={()=>setNum1(num1+1)}>大家一起发财</button>

//     </div>
//     </>)
// }



const UseMemo = () =>{
    const [num1,setNum1] = useState(0)
    const [num2,setNum2] = useState(0)


//     useEffect(()=>{
// console.log('页面更新了');
//     })

    const num1Cheng2 = ()=>{
        console.log('num1Cheng2');
        return num1 * 2
    }

    const num2Money = useMemo(()=>{
        console.log('useMemo');
        return num1 * 2
    },[num1])
 return(<>
 <h1>useMemo的使用</h1>
 <div>我有{num1}块钱</div>
 <div>他有{num1Cheng2()}块钱</div>
 <div>他有{num2Money}块钱</div>
 <button onClick={()=>setNum1(num1+1)}>大家一起发财</button>
 <hr />
 <div>num2={num2}</div>
 <button onClick={()=>setNum2(num2+1)}>大家一起发财</button>



 {/* 不用useMemo的方法 */}
 </>)
}

export default UseMemo